<template>
  <div class="top-right-btn" :style="style">
    <el-row>
      <el-tooltip v-if="search" class="item" :content="showSearch ? '隐藏搜索' : '显示搜索'"
                  placement="top">
        <el-button circle type="primary" plain icon="Search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" content="刷新" placement="top">
        <el-button circle type="primary" plain icon="Refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip v-if="columns" class="item" content="显示/隐藏列" placement="top">
        <a-flex class="show-btn">
          <a-popover placement="bottomRight" trigger="click">
            <template #content>
              <div style="width: 300px">
                <a-table :data-source="columns" :columns="toolbarColumns" :scroll="{x:'100%', y: 200 }"
                         :pagination="false"
                         size="small">
                  <template #headerCell="{column}">
                    <template v-if="column.dataIndex ==='selection'">
                      <a-checkbox
                        :indeterminate="indeterminate"
                        :checked="allSelected"
                        @change="toggleAll"
                      />
                    </template>
                  </template>
                  <template #bodyCell="{column, record, index}">
                    <template v-if="column.dataIndex ==='selection'">
                      <a-checkbox
                        v-model:checked="record.hidden"
                      />
                    </template>
                    <template v-if="column.dataIndex ==='fixed'">
                      <el-button link size="large" :type="record.fixed==='left'?'primary':'info'"
                                 @click="leftFixedChange(record)">
                        <template #icon>
                          <svg-icon icon-class="left-fixed" />
                        </template>
                      </el-button>
                      <el-button link size="large" :type="record.fixed===undefined?'primary':'info'"
                                 icon="CircleCloseFilled" @click="fixedChange(record)" />
                      <el-button link size="large" :type="record.fixed==='right'?'primary':'info'"
                                 @click="rightFixedChange(record)">
                        <template #icon>
                          <svg-icon icon-class="right-fixed" />
                        </template>
                      </el-button>
                    </template>
                  </template>
                  <template #footer>
                    <a-button type="text" @click="resetColumn()">恢复默认</a-button>
                    <a-button type="text" @click="submit">确认</a-button>
                  </template>
                </a-table>
              </div>
            </template>
              <el-button circle type="primary" plain>
                <template #icon>
                  <svg-icon icon-class="category" />
                </template>
              </el-button>
          </a-popover>
        </a-flex>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { propTypes } from '@/utils/propTypes';
import { cloneDeep } from 'lodash';


const props = defineProps({
  showSearch: propTypes.bool.def(true),
  columns: propTypes.fieldOption,
  search: propTypes.bool.def(true),
  gutter: propTypes.number.def(10)
});
ref<ElTreeInstance>();
const emits = defineEmits(['update:showSearch', 'queryTable']);
const defaultColumns = reactive(cloneDeep(props.columns));
const columns = ref<any>(cloneDeep(props.columns));
const style = computed(() => {
  const ret: any = {};
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret;
});

// 搜索
function toggleSearch() {
  emits('update:showSearch', !props.showSearch);
}

// 刷新
function refresh() {
  emits('queryTable');
}

//
const toolbarColumns: any = [
  { dataIndex: 'selection', width: 30, align: 'center' },
  { title: '隐藏', dataIndex: 'title', width: 100, ellipsis: true },
  { dataIndex: 'fixed', width: 100 }
];
// 计算半选状态
const indeterminate = computed(() => {
  return !allSelected.value &&
    columns.value.some(item => item.hidden);
});
// 计算全选状态
const allSelected = computed(() => {
  return columns.value.length > 0 &&
    columns.value.every(item => item.hidden);
});
const toggleAll = () => {
  const shouldSelect = !allSelected.value;
  columns.value.forEach(item => {
    item.hidden = shouldSelect;
  });
};

// 将数据列固定到左侧
function leftFixedChange(record: any) {
  columns.value.find(item => item.dataKey === record.dataKey).fixed = 'left';
}

function fixedChange(record: any) {
  columns.value.find(item => item.dataKey === record.dataKey).fixed = undefined;
}

function rightFixedChange(record: any) {
  columns.value.find(item => item.dataKey === record.dataKey).fixed = 'right';
}

/*重置显隐列*/
const resetColumn = () => {
  columns.value = cloneDeep(defaultColumns);
};

const submit = () => {
  props.columns.forEach((item, index) => {
    if (item['dataKey'] === columns.value[index].dataKey) {
      item['hidden'] = columns.value[index].hidden;
      item.fixed = columns.value[index].fixed;
    }
  });
};

// 显隐列初始默认隐藏列
onMounted(() => {
  submit();
});
</script>

<style lang="scss" scoped>
:deep(.el-transfer__button) {
  border-radius: 50%;
  display: block;
  margin-left: 0px;
}

:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}

.my-el-transfer {
  text-align: center;
}


.show-btn {
  margin-left: 12px;
}

</style>

